<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>慢作Worktop | 好东西慢慢作</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="alternate icon" type="image/png" href="../assets/i/favicon.png">
    <link rel="stylesheet" href="../base-component/amazeui/css/amazeui.min.css"/>
    <link rel="stylesheet" href="../base-component/cropper/cropper.min.css"/>
    <link rel="stylesheet" href="../base-component/layui/css/layui.css"/>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        dl, dt, dd, ul, li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        p {
            font-size: 12px;
        }
        dt {
            font-size: 14px;
            font-weight: bold;
            border-bottom: 1px dotted #000;
            padding: 5px 0 5px 5px;
            margin: 5px 0;
        }
        dd {
            padding: 5px 0 0 5px;
        }
        li {
            line-height: 28px;
        }
        input {
            outline: none;
            border: 0px;
        }
        .am-edit-width-min {
            min-width: 160px;
            width: 160px;
            max-width: 160px;
        }
        .am-tab-width-min {
            min-width: 80px;
            /* width: 120px;
            max-width: 80px; */
        }
		#specBox input{
		font-size: 1rem;
		}
        .fontColor{
            color:red;
            font-size: 12px;
        }
    </style>
</head>
<body>
<!--title-->
<div class="am-cf am-padding">
    <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">商品管理</strong>
    </div>
</div>
<!--列表-->
<div id="listBox" class="am-panel am-panel-secondary">
    <div class="am-panel-hd">
        <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#sys-goods-list'}">
           商品管理列表<span class="am-icon-chevron-down am-fr"></span>
        </h4>
    </div>
    <div id="sys-goods-list" class="am-panel-collapse am-collapse am-in">
        <div class="am-panel-bd">
            <!-- 列表数据显示 -->
            <div class="am-g" style="padding-bottom: 40px;">
                <div class="am-u-sm-12">
                    <div class="am-scrollable-horizontal">
                        <table class="am-table am-table-striped am-table-hover am-text-sm am-text-center">
                            <thead>
                            <tr class="">
                                <th class="am-text-truncate am-tab-width-min am-text-center">名称</th>
                                <th class="am-text-truncate am-tab-width-min am-text-center">英文名</th>
                                <th class="am-text-truncate am-tab-width-min am-text-center">分类名称</th>
                                <th class="am-text-truncate am-tab-width-min am-text-center">售价</th>
                                <th class="am-text-truncate am-tab-width-min am-text-center">成本价</th>
                                <th class="am-text-truncate am-tab-width-min am-text-center">商品类型</th>
                                <th class="am-text-truncate am-tab-width-min am-text-center">商品编号</th>
                                <th class="am-text-truncate am-tab-width-min am-text-center">是否上架</th>
                                <th class="am-text-truncate am-edit-width-min am-text-center">
                                    <button style="margin: 0 auto" class="am-btn am-btn-danger am-btn-xs"
                                            id="shop-print-add">新增
                                    </button>
                                </th>
                            </tr>
                            </thead>
                            <!-- 订单列表显示 -->
                            <tbody id="sys-product-list-body">
                            </tbody>
                        </table>
                    </div>
                    <div id="sys-product-list-body-page" class="am-fr"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 修改模态窗口 -->
<div class="am-modal-dialog" id="sys-product-update-model" style="display: none;">
    <div class="am-u-sm-12">
        <form class="am-form" id="sys-product-form-update" data-am-validator>
            <fieldset>
                <div class="am-form-group">
                    <label for="name">商品名称</label>
                    <input class="" type="text" class=""  id="name" placeholder="请输入商品名称..." required="required">
                    <span class="am-form-caret"></span>
                </div>
                <div class="am-form-group">
                    <label for="englishName">英文名称</label>
                    <input class="" type="text" class="" onKeyUp="value=value.replace(/[\u4E00-\u9FA5]/g,'')" id="englishName" placeholder="请输入英文名称[仅支持英文和数字]" required="required">
                </div>
                <div class="am-form-group">
                    <label for="isCake">商品类型</label>
                    <select id="isCake">
                        <option value="0">常温</option>
                        <option value="1">新鲜</option>
                    </select>
                    <span class="am-form-caret"></span>
                </div>
                <div class="am-form-group">
                      <label for="categoryName">商品分类</label>
				      <select id="categoryName">
				      </select>
				      <span class="am-form-caret"></span>
                </div>
                <div class="am-form-group">
                    <label for="sn">商品编号</label>
                    <input class="" type="text" class="" id="sn" placeholder="商品编号自动生成..."  disabled >
                    <span class="am-form-caret"></span>
                </div>
               <!-- 暂时不需要积分了
               <div class="am-form-group">
                    <label for="point">积分</label>
                    <input id="point" type="text"  class="isPositive" placeholder="请输入积分[仅支持数字]..." required="required">
                    <span class="am-form-caret"></span>
                </div>-->
                <div class="am-form-group">
                    <label for="cost">成本价</label>
                    <input id="cost" type="text"  class="isPrice priceLimit" placeholder="请输入成本价..." required="required" >
                    <span class="am-form-caret"></span>
                </div>
                <div class="am-form-group">
                    <label for="isMarketable">是否上架</label>
                    <select id="isMarketable">
                        <option value="1">上架</option>
                        <option value="0">下架</option>
                    </select>
                    <span class="am-form-caret"></span>
                </div>
                <div class="am-form-group">
                    <label for="productDetailsIntroduction">产品故事</label>
                    <textarea class="" rows="3" id="productDetailsIntroduction"></textarea>
                </div>
                <div class="am-form-group">
                    <label for="productDetailsIntroduction2">精选食材</label>
                    <textarea class="" rows="3" id="productDetailsIntroduction2"></textarea>
                </div>
                <div class="am-form-group">
                    <label for="sendIntro">配送说明</label>
                    <textarea class="" rows="2"id="sendIntro" placeholder="请输入配送说明..." required="required"></textarea>
                </div>
                <div class="am-form-group">
                    <label for="sendTimeIntro">配送时间</label>
					<textarea class="" rows="2" id="sendTimeIntro" placeholder="请输入配送时间说明..." required="required"></textarea>
                </div>
                <div class="am-form-group">
                    <label for="announcement">注意事项</label>
					<textarea class="" rows="3" id="announcement" placeholder="请输入注意事项......" required="required"></textarea>
                </div>
                <div class="am-form-group">
                    <label for="foodStorage">食用储存</label>
					<textarea class="" rows="2" id="foodStorage" placeholder="请输入储存建议......" required="required"></textarea>
                </div>

                <div class="am-form-group">
                    <label>首页图片</label>
                    <div class='am-g' id='product-images'>  </div>
                </div>
                <div class="am-form-group fontColor" >
                    首页商品缩略图：180px*180px (1张)
                </div>
                <div class="am-form-group am-form-file">
                    <button type="button" class="am-btn am-btn-default am-btn-sm">
                        <i class="am-icon-cloud-upload"></i> 上传图片(小于100K)
                    </button>
                    <input type="file" id="productFileImg" multiple>
                </div>


                <div class="am-form-group">
                    <label>产品图片</label>
                    <div class='am-g' id='product-images2'></div>
                </div>
                <div class="am-form-group fontColor" >
                    商品详情页banner：750px*460px (最多5张)
                </div>
                <div class="am-form-group am-form-file">
                    <button type="button" class="am-btn am-btn-default am-btn-sm">
                        <i class="am-icon-cloud-upload"></i> 上传图片(小于200K)
                    </button>
                    <input type="file" id="productFileImg2" multiple>
                </div>

                <div class="am-form-group">
                    <label for="productUnitName">规格单位</label>
                    <input class="" type="text" name="productUnitName"  class="" id="productUnitName" placeholder="请输入规格单位[不支持数字]"   onkeyup="value=value.replace(/^[0-9]/g,'')"    required="required">
                    <span class="am-form-caret"></span>
                </div>
                <div class="am-form-group">
                    <div id="specBox" class="am-panel am-panel-default">
                        <div class="am-panel-hd">编辑规格</div>
                        <div class="am-panel-bd">
                            <div class="am-scrollable-horizontal">
                                <table class="am-table am-table-striped am-table-hover am-text-sm am-text-center">
                                    <thead>
                                    <tr>
                                        <th class="am-text-truncate am-tab-width-min am-text-center">规格值</th>
                                        <th class="am-text-truncate am-tab-width-min am-text-center">尺寸说明</th>
                                        <th class="am-text-truncate am-tab-width-min am-text-center">介绍</th>
                                        <th class="am-text-truncate am-tab-width-min am-text-center">价格</th>
                                        <th class="am-text-truncate am-edit-width-min">
                                            <button type="button" class="am-btn  am-fr am-btn-xs">操作</button>
                                            <button  type="button" class="am-btn am-btn-danger am-fr am-btn-xs" id="addGoods">新增</button>
                                        </th>
                                    </tr>
                                    </thead>
                                    <!-- 规格列表 -->
                                    <tbody id="specProduct">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="am-form-group am-form-group-sm am-margin-top am-padding-top">
                    <button type="button" class="am-btn am-btn-primary am-fl" id="save">保存</button>
                </div>
            </fieldset>
            <input type = "hidden" id = "product-id" name = "productId">
            <input type = "hidden" id = "specification-id" name = "specificationId">
        </form>
    </div>
</div>
<!--规格模版-->
<script id="sysSpecificationValuesListTpl" type="text/html">
    {{#  layui.each(d.specificationValues, function(index, item){ }}
    <tr specificationValueId="{{ item.specificationValueId }}">
        <td class="am-text-truncate am-tab-width-min"><input type="number" min="0" class="isPositive am-form-field am-radius" required name="productUnitNumber" value="{{ item.productUnitNumber }}" placeholder="仅支持数字" /></td>
        <td class="am-text-truncate am-tab-width-min"><input type="text" class="am-form-field am-radius" name="productSize" value="{{ item.productSize }}" placeholder="尺寸说明" /></td>
        <td class="am-text-truncate am-tab-width-min"><input type="text" class="am-form-field am-radius" name="productSpecificationIntroduction" value="{{ item.productSpecificationIntroduction }}" placeholder="规格介绍" /></td>
        <td class="am-text-truncate am-tab-width-min"><input type="number" min="1" class="isPrice priceLimit am-form-field am-radius" required name="productPrice"  value="{{ item.productPrice }}" placeholder="价格" /></td>
		<td class="am-text-truncate am-edit-width-min">
            <div class="am-btn-group am-btn-group-xs">
                <input type="button" class="am-btn am-btn-success btn-order-list-detail deletProduct"   value="删除">
            </div>
        </td>
    </tr>
    {{#  }); }}
</script>
<!--list模版-->
<script id="sysProductListTpl" type="text/html">
    {{#  layui.each(d.msg, function(index, item){ }}
    <tr>
        <td class="am-text-truncate am-tab-width-min">{{ item.name }}</td>
        <td class="am-text-truncate am-tab-width-min">{{ item.englishName }}</td>
        <td class="am-text-truncate am-tab-width-min">{{ item.categoryName }}</td>
        <td class="am-text-truncate am-tab-width-min">{{ item.price }}</td>
        <td class="am-text-truncate am-tab-width-min">{{ item.cost }}</td>
        <td class="am-text-truncate am-tab-width-min">{{ item.typeName }}</td>
        <td class="am-text-truncate am-tab-width-min">{{ item.sn }}</td>
        {{# if(item.isMarketable === true){ }}
        <td class="am-text-truncate am-tab-width-min">已上架</td>
        {{# } }}
        {{# if(item.isMarketable === false){ }}
        <td class="am-text-truncate am-tab-width-min">未上架</td>
        {{# } }}
        <td class="am-text-truncate am-edit-width-min">
            <div class="am-btn-group am-btn-group-xs">
                <input type="button" class="am-btn am-btn-success btn-order-list-detail" onclick="edit(this)" productId="{{ item.id }}" value="编辑">
            </div>
        </td>
    </tr>
    {{#  }); }}
</script>
<!--list模版-->
<script id="sysOrderListTpl" type="text/html">
    {{#  layui.each(d.msg, function(index, item){ }}
    <tr>
        <td class="am-text-truncate am-tab-width-min">{{ item.name }}</td>
        <td class="am-text-truncate am-tab-width-min">{{ item.intro }}</td>
        <td class="am-text-truncate am-tab-width-min">{{ item.postType }}</td>
        <td class="am-text-truncate am-tab-width-min">{{ item.dayPrice }}</td>
        <td class="am-text-truncate am-tab-width-min">{{ item.nigtPrice }}</td>
        <td class="am-center">
            <div class="am-btn-group am-btn-group-xs">
                <input type="button" class="am-btn am-btn-success btn-order-list-detail" onclick="edit(this)" shopId="{{ item.id }}" value="编辑">
            </div>
        </td>
    </tr>
    {{#  }); }}
</script>

<script src="../base-component/jquery/jquery.min.js"></script>
<script src="../base-component/amazeui/js/amazeui.min.js"></script>
<script src="../assets/js/api.js"></script>
<script src="../base-component/layer/layer.js"></script>
<script src="../base-component/layui/layui.js"></script>
<script src="../base-component/cropper/cropper.min.js"></script>
<script src="../assets/js/system-product.js"></script>
</body>
</html>
